<template>
  <div id="app">
    <el-container class="home-container">
<!--  顶部  -->
      <el-header class="home-header">
        <el-row>
          <el-col :span="3">
            <img src="./assets/images/logo.png" class="home-header-logo">
          </el-col>
          <el-col :span="14" class="home-header-title">
            <div >图书借阅管理子系统</div>
          </el-col>
          <el-col :span="4">{{$store.state.loginState?'欢迎您,'+this.role[this.$store.state.user.user_role]+this.$store.state.user.user_id:''}}</el-col>
          <el-col :span="3" class="home-header-button">
            <el-button type="primary" round class="home-header-login" @click="login">{{$store.state.loginState?loginMessage[0]:loginMessage[1]}}</el-button>
            <el-dialog title="登录" :visible.sync="loginFormVisible" style="width: 60%;margin-left: 20%">
              <el-form
                      :model="loginForm"
                      status-icon
                      :rules="rules"
                      ref="loginForm"
                      label-width="120px"
                      class="home-header-login-form"
              >
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="loginForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="login-footer">
                <el-button @click="loginFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitLoginForm">确 定</el-button>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
      </el-header>
<!--  中间  -->
      <el-main class="home-main" style="padding: 0">
        <router-view></router-view>
      </el-main>
<!--  底部  -->
      <el-footer class="home-footer">
        <el-row>
          <div>
            Copyright © 2020 Lime2019  All Rights Reserved
          </div>
        </el-row>
        <el-row>
          <a href="https://blog.csdn.net/weixin_44171004">我的博客</a>
          <a href="https://gitee.com/lime2019">我的码云</a>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    data(){
      // 校检登录表单的数据
      let validUserName = (rule, value, callback) => {
        if(value === ''){
          callback(new Error('请输入用户名'))
        }else{
          if(value.length !== 10){
            callback(new Error('请检查用户名长度'))
          }else{
            callback()
          }
        }
      }
      let validPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      }
      // 返回值
      return{
        // 登录信息显示
        role:['学生','管理员','负责人'],
        loginMessage:['注销','登录'],
        // 登录表单显示与否
        loginFormVisible: false,
        // 登录表单
        loginForm: {
          username:'',
          password:''
        },
        // 登录表单校验规则
        rules:{
          username:[
            {
              validator:validUserName,
              trigger: 'blur'
            }
          ],
          password:[
            {
              validator:validPassword,
              trigger:'blur'
            }
          ],
        }
      }
    },
    methods:{
      // 点击登录按键
      login(){
        if(!this.$store.state.loginState){
          this.loginFormVisible = true
        }
        else{
          this.$store.commit('logout')
          this.$message({
            message: '退出成功',
            type: 'success'
          })
          this.$router.replace({path:'/'})
        }
      },
      // 发动登录请求
      submitLoginForm(){
        console.log('发送登录请求！')
        this.$axios.post('/login',{
          username:this.loginForm.username,
          password:this.loginForm.password
        }).then(res =>{
          if(res.data.code === 200){
            this.$message({
              message: '登陆成功',
              type: 'success'
            })
            console.log(res.data)
            this.loginFormVisible = false
            const {user_id,user_email,user_role} = res.data.msg
            this.$store.commit( {
              type:'login',
              user_id:user_id,
              user_email:user_email,
              user_role:user_role
            })
            if(this.$store.state.user.user_role === 2){
              this.$router.replace({path:'/headinghome'})
            }else{
              if(this.$store.state.user.user_role === 1){
                this.$router.replace({path:'/adminhome'})
              }
              else{
                this.$router.replace({path:'/studenthome'})
              }
            }
          }else{
            this.$message({
              message: '用户名或密码错误',
              type: 'warning'
            })
          }
        }).catch(errorResponse =>{
          this.$message.error('请刷新页面重试');
        })
      }
    }
  }
</script>

<style>
/* 修改页面样式，使页面铺满全屏 */
html{
  height: 100%;
}
body{
  margin: 0;
  height: 100%;
}
/* 继承父元素高度 */
#app {
  height: 100%;
}
/* 整个容器的样式 */
.el-container{
  height: 100%;
}

/* 顶部的样式 */
.el-header{
  background-color: Lavender;
  line-height:60px;
}
.home-header-logo{
  height: 60px;
}
.home-header-title{
  height: 60px;
  text-align: center;
  font-family: Georgia, serif;
  font-size:40px;
}
.home-header-button{
  height: 60px;
  text-align: center;
}
.home-header-login{
  margin: 10px;
}

/* 中间的样式 */
.home-main{
  background-color: LightSteelBlue;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

/* 底部的样式 */
  .home-footer{
    background-color: SlateGray;
    text-align: center;
    line-height:30px;
  }
  a{
    margin: 40px;
    color: MediumAquamarine;
    text-decoration:none;
  }
  a:hover{
    color: Cyan;
    text-decoration:none;
  }
  a:active{
    color:MediumSpringGreen;
  }
</style>
